<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖音大数据观测平台 - 用户数据分析</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- 所有样式已移至外部CSS文件 -->
</head>
<body class="user-data-page">
    <!-- 导航栏 -->
    <nav class="navbar" aria-label="主导航">
    <div class="logo">
        <a href="index.html" class="home-link" aria-current="page">🏠 抖音大数据观测平台</a>
    </div>
    <ul class="nav-menu">
        <li><a href="overview.html" aria-label="实时概览页面">实时概览</a></li>
        <li><a href="hotspot.html" aria-label="热点趋势页面">热点趋势</a></li>
        <li><a href="user-data.html" class="active" aria-current="page" aria-label="用户数据页面">用户数据</a></li>
    </ul>
    <div class="time-display" id="currentTime">00:00:00</div>
    <button id="fullscreenBtn" class="btn" aria-label="切换全屏显示">全屏</button>
</nav>

    <!-- 页面内容 -->
    <div class="dashboard">
        <!-- 头部数据卡片 -->
        <div class="dashboard-header">
            <div class="stat-card">
                <div class="stat-value counter" data-target="34285712">0</div>
                <div class="stat-label">总用户数</div>
                <div class="stat-change positive">+2.3% <span class="stat-unit">较昨日</span></div>
            </div>
            <div class="stat-card">
                <div class="stat-value counter" data-target="8952341">0</div>
                <div class="stat-label">日活跃用户</div>
                <div class="stat-change positive">+4.5% <span class="stat-unit">较昨日</span></div>
            </div>
            <div class="stat-card">
                <div class="stat-value counter" data-target="1345">0</div>
                <div class="stat-label">平均在线时长(分钟)</div>
                <div class="stat-change negative">-1.2% <span class="stat-unit">较昨日</span></div>
            </div>
            <div class="stat-card">
                <div class="stat-value counter" data-target="2786543">0</div>
                <div class="stat-label">新增用户</div>
                <div class="stat-change positive">+8.7% <span class="stat-unit">较昨日</span></div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="dashboard-content">
            <!-- 用户地域分布图 -->
            <div class="card">
                <div class="card-header">
                    <h3>用户地域分布</h3>
                    <div class="card-controls">
                        <select id="regionTimeRange" class="form-select" title="选择统计时间范围">
                            <option value="day">今日</option>
                            <option value="week">本周</option>
                            <option value="month" selected>本月</option>
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    <div id="regionDistributionChart" class="chart"></div>
                </div>
            </div>

            <!-- 用户活跃度分析 -->
            <div class="card">
                <div class="card-header">
                    <h3>用户活跃度趋势</h3>
                    <div class="card-controls">
                        <select id="activeTimeRange" class="form-select" title="选择统计时间范围">
                            <option value="day">今日</option>
                            <option value="week" selected>本周</option>
                            <option value="month">本月</option>
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    <div id="activeTrendChart" class="chart"></div>
                </div>
            </div>

            <!-- 用户画像分析 -->
            <div class="card">
                <div class="card-header">
                    <h3>用户画像分析</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <h4>年龄分布</h4>
                            <div id="ageDistributionChart" class="chart"></div>
                        </div>
                        <div class="col-6">
                            <h4>性别分布</h4>
                            <div id="genderDistributionChart" class="chart"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <h4>兴趣标签</h4>
                            <div class="user-tags" id="interestTags"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 高价值用户列表 -->
            <div class="card">
                <div class="card-header">
                    <h3>高价值用户TOP10</h3>
                    <div class="card-controls">
                        <select id="userRankingType" class="form-select" title="选择排序类型">
                            <option value="engagement" selected>互动活跃度</option>
                            <option value="spend">消费贡献</option>
                            <option value="influence">影响力</option>
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    <div id="topUsersList" class="user-list"></div>
                </div>
            </div>

            <!-- 用户增长趋势 -->
            <div class="card">
                <div class="card-header">
                    <h3>用户增长趋势</h3>
                </div>
                <div class="card-body">
                    <div id="userGrowthChart" class="chart"></div>
                </div>
            </div>

            <!-- 用户停留时长分布 -->
            <div class="card">
                <div class="card-header">
                    <h3>用户停留时长分布</h3>
                </div>
                <div class="card-body">
                    <div id="dwellTimeChart" class="chart"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入JS库 -->
    <script src="js/echarts.min.js"></script>
    <script src="js/world.js"></script>
    <script src="js/timeDisplay.js"></script>
    <script src="/js/user-data.js"></script>
<script src="/js/animation.js"></script>
</body>
</html>